<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>多边形编辑器吸附功能</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=afff1124493652573b05093f4d112903&plugin=AMap.AutoComplete,AMap.PolygonEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>

<body>
    <div id="container"></div>
    <div class="input-card" style="width: 120px">
        <button class="btn" onclick="createPolygon()" style="margin-bottom: 5px">新建</button>
        <button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button>
        <button class="btn" onclick="polyEditor.close()">结束编辑</button>
    </div>
    <script type="text/javascript">
        var map = new AMap.Map("container", {
            center: [116.471354, 39.994257],
            zoom: 16.8
        });
        var path6 = [[120.2225, 30.341117], [120.219668, 30.336645], [120.218605, 30.33446], [120.218616, 30.334238], [120.220998, 30.334358], [120.222682, 30.334701], [120.223594, 30.335071], [120.224378, 30.335469], [120.225765, 30.336622], [120.225899, 30.337367], [120.227937, 30.338386], [120.22828, 30.338571], [120.228892, 30.338664], [120.232647, 30.341238], [120.23195, 30.341692], [120.231909, 30.342164], [120.231469, 30.342877], [120.22383, 30.339108], [120.223702, 30.339312], [120.223627, 30.339479], [120.223208, 30.341229]]
        var path4 = [[120.232647, 30.341238], [120.233891, 30.340465], [120.233396, 30.339987], [120.233089, 30.339713], [120.232747, 30.339438], [120.232582, 30.339153], [120.231721, 30.338522], [120.231144, 30.338074], [120.229517, 30.336975], [120.229411, 30.337209], [120.229328, 30.337474], [120.229281, 30.337728], [120.229234, 30.337973], [120.229151, 30.33842], [120.228892, 30.338664], [120.229799, 30.339286]]
        var path5 = [[120.228892, 30.338664], [120.229151, 30.33842], [120.22919, 30.338208], [120.229369, 30.337345], [120.229517, 30.336975], [120.228618, 30.336283], [120.228323, 30.336029], [120.227592, 30.335306], [120.227238, 30.33492], [120.226779, 30.334584], [120.226354, 30.334401], [120.225824, 30.33433], [120.225706, 30.334309], [120.225647, 30.335032], [120.2256, 30.335846], [120.225517, 30.336059], [120.225396, 30.336315], [120.225765, 30.336622], [120.225899, 30.337367], [120.227296, 30.338065], [120.227937, 30.338386], [120.22828, 30.338571], [120.228626, 30.338624]]
        var path7 = [[120.225706, 30.334309], [120.224085, 30.334012], [120.223095, 30.333819], [120.222646, 30.333585], [120.221043, 30.332415], [120.220218, 30.33212], [120.21977, 30.331814], [120.219652, 30.33155], [120.21832, 30.331428], [120.217706, 30.331489], [120.217683, 30.331845], [120.217883, 30.332018], [120.218013, 30.332333], [120.218414, 30.332964], [120.218544, 30.333697], [120.218616, 30.334238], [120.220409, 30.334328], [120.222682, 30.334701], [120.224378, 30.335469], [120.225396, 30.336315], [120.2256, 30.335846], [120.225635, 30.335232]]
        var path1 = [[120.212085, 30.332113], [120.217234, 30.332162], [120.214744, 30.328155], [120.211677, 30.328701], [120.211804, 30.33215]]
        var path12 = [[120.214744, 30.328155], [120.215361, 30.327819], [120.215369, 30.327778], [120.215182, 30.327185], [120.214721, 30.327407], [120.214096, 30.32765], [120.211502, 30.327846], [120.211677, 30.328701], [120.213458, 30.328384]]
        var path10 = [[120.211804, 30.33215], [120.207542, 30.332344], [120.205878, 30.332308], [120.205857, 30.331271], [120.205508, 30.331226], [120.205436, 30.330641], [120.204163, 30.330668], [120.203967, 30.330597], [120.203906, 30.330517], [120.203885, 30.330473], [120.203803, 30.33042], [120.203824, 30.330358], [120.203772, 30.330304], [120.2037, 30.330198], [120.203659, 30.329959], [120.203659, 30.32987], [120.204286, 30.329799], [120.211677, 30.328701]]
        var path2 = [[120.203659, 30.32987], [120.203591, 30.329354], [120.203211, 30.329347], [120.203014, 30.327486], [120.20267, 30.327515], [120.202528, 30.326193], [120.203858, 30.326076], [120.20456, 30.326029], [120.204289, 30.325627], [120.203332, 30.324019], [120.208968, 30.324182], [120.208928, 30.323332], [120.21094, 30.323192], [120.211502, 30.327846], [120.211677, 30.328701], [120.208082, 30.329235]]
        var path11 = [[120.215182, 30.327185], [120.216031, 30.326685], [120.213942, 30.321895], [120.212241, 30.318959], [120.212122, 30.318907], [120.211496, 30.319989], [120.211227, 30.321174], [120.211078, 30.322204], [120.21094, 30.323192], [120.211289, 30.326079], [120.211502, 30.327846], [120.214096, 30.32765], [120.215182, 30.327185]]
        var path8 = [[120.217234, 30.332162], [120.217883, 30.332018], [120.217683, 30.331845], [120.217706, 30.331489], [120.21832, 30.331428], [120.219652, 30.33155], [120.21977, 30.331814], [120.220218, 30.33212], [120.221043, 30.332415], [120.220695, 30.331629], [120.220582, 30.331275], [120.221486, 30.331141], [120.22126, 30.329934], [120.221458, 30.329531], [120.22119, 30.328056], [120.219071, 30.328129], [120.219226, 30.327251], [120.219593, 30.326641], [120.219749, 30.326471], [120.220074, 30.326483], [120.220695, 30.326483], [120.221303, 30.326422], [120.221953, 30.32619], [120.222391, 30.325983], [120.222574, 30.325703], [120.222532, 30.325288], [120.222292, 30.325129], [120.221529, 30.32452], [120.220964, 30.323434], [120.219975, 30.323934], [120.218096, 30.325203], [120.216031, 30.326685], [120.215182, 30.327185], [120.215361, 30.327819], [120.214744, 30.328155], [120.217116, 30.331972]]
        var path3 = [[120.219318, 30.324378], [120.218279, 30.323011], [120.217723, 30.322208], [120.217587, 30.321944], [120.217757, 30.321905], [120.217757, 30.321405], [120.217235, 30.321337], [120.217348, 30.320661], [120.21753, 30.320221], [120.217655, 30.320084], [120.219299, 30.319868], [120.219526, 30.320387], [120.219594, 30.320798], [120.219662, 30.321239], [120.219968, 30.322747], [120.220978, 30.32261], [120.220964, 30.323434], [120.219975, 30.323934]]
        var path9 = [[120.213183, 30.320584], [120.215051, 30.31949], [120.216276, 30.319026], [120.217136, 30.319138], [120.217415, 30.319193], [120.217655, 30.320084], [120.217235, 30.321337], [120.217757, 30.321405], [120.217757, 30.321905], [120.217587, 30.321944], [120.219318, 30.324378], [120.216031, 30.326685], [120.214515, 30.323208], [120.213942, 30.321895]]
        let pathList = [path6, path4, path5, path7, path1, path12, path10, path2, path11, path8, path3, path9]
        let polygonList = pathList.map(path => {
            var polygon = new AMap.Polygon({
                path
            })
            return polygon
        })
        map.add([...polygonList]);
        map.setFitView();
        var polyEditor = new AMap.PolygonEditor(map);
        polyEditor.addAdsorbPolygons([...polygonList]);
        polyEditor.on('add', function (data) {
            var polygon = data.target;
            polyEditor.addAdsorbPolygons(polygon);
            polygon.on('dblclick', (event) => {
                polyEditor.setTarget(polygon);
                polyEditor.open();
                let pointArr = event.target.getPath()
                let polygonPaths = []
                for (let i = 0; i < pointArr.length; i++) {
                    polygonPaths.push([pointArr[i].lng, pointArr[i].lat])
                }
                console.log(JSON.stringify(polygonPaths));
            })
        })
        polygonList.forEach(item => {
            item.on('dblclick', () => {
                polyEditor.setTarget(item);
                polyEditor.open();
            })
        })
        function createPolygon() {
            polyEditor.close();
            polyEditor.setTarget();
            polyEditor.open();
        }
        polyEditor.open();
    </script>
</body>

</html>